<template>
    <FormItem :label="`${itemData.label}：`" :prop="itemData.name" :label-for="itemData.name" :rules='itemData.rules'>
				<div class="qw-form-txt" v-if="itemData.readonly">{{ itemData.label }}</div>

				<Cascader class="Cascader" v-else :disabled="itemData.disabled" v-model='formData[itemData.name]' :data="selectData" :load-data="getCityData" @on-change='handleChange' :filterable="itemData.filterable"></Cascader>
				<!-- <Cascader v-else :disabled="itemData.disabled" v-model="formData[itemData.name]" @on-change='handleChange' :data="itemData.areaData" :changeOnSelect="itemData.changeOnSelect" :filterable="itemData.filterable"></Cascader> -->
    </FormItem>
</template>
<script>
    import { ApiRequest } from '@api/basePage';
    export default {
        props: {
            itemData: {
                type: Object
            },
            formData: {
                type: Object
            },
            getName: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                dataList: [],
                selectData: [],
                nameArr: [],
                // 列表页请求接口地址
                requestApi: { // 视情况自定义
                    // 获取省
                    getAllProvice: {
                        url: '/sysback/province/getAllProvice', // 接口地址
                        type: 'post' // 接口请求类型
                    },
                    // 获取市
                    getCityByProvince: {
                        url: '/sysback/city/getCityByProvince', // 接口地址
                        type: 'post'
                    },
                    // 获取区县
                    getRegionsByCity: {
                        url: '/sysback/region/getRegionsByCity', // 接口地址
                        type: 'post'
                    }
                }
            };
        },
        watch: {
            itemData (val) {
                if (this.getName) {
                    this.formData.cityNames = [];
                    this.$emit('handleChangeFormData', this.formData);
                }
            }
        },
        created () {
            this.getAllProvice();
        },
        methods: {
            // 改变选中值
            handleChange (value, selectData) {
                let nameArr = [];
                selectData.forEach(item => {
                    nameArr.push(item.label)
                })
                if (this.getName) {
                    this.formData.cityNames = nameArr;
                    this.$emit('handleChangeFormData', this.formData);
                    this.$emit('getCityName', nameArr);
                } else {
                    this.$emit('handleChangeFormData', this.formData);
                }
            },
            // 获取省
            getAllProvice () {
                let data = {}

                // 开始请求商品列表
                ApiRequest(this.requestApi.getAllProvice.url, this.requestApi.getAllProvice.type, data).then(res => {
                    if (res.retStatus === '1') {
                        this.allProvice = res.retData

                        this.allProvice.forEach(item => {
                            this.selectData.push({
                                level: '1',
                                value: item.areaCode,
                                label: item.provinceName,
                                children: [],
                                loading: false
                            })
                        })
                    }
                })
            },

            // 获取城市
            getCityData (item, callback) {
                item.loading = true;
                let data = {};
                let apiUrl = '';
                let apiType = '';
                if (item.level === '1') {
                    data = {
                        provinceCode: item.value
                    }
                    apiUrl = this.requestApi.getCityByProvince.url;
                    apiType = this.requestApi.getCityByProvince.type;
                }
                if (item.level === '2') {
                    data = {
                        cityCode: item.value
                    }
                    apiUrl = this.requestApi.getRegionsByCity.url;
                    apiType = this.requestApi.getRegionsByCity.type;
                }
                // 开始请求商品列表
                ApiRequest(apiUrl, apiType, data, true).then(res => {
                    if (res.retStatus === '1') {
                        let citys = res.retData;
                        citys.forEach(obj => {
                            if (!this.formData.showArea && item.level === '1') {
                                item.children.push({
                                    level: item.level === '1' ? '2' : '3',
                                    label: item.level === '1' ? obj.cityName : obj.regionName,
                                    value: obj.areaCode,
                                    children: [],
                                    loading: false
                                });
                            } else {
                                item.children.push({
                                    level: item.level === '1' ? '2' : '3',
                                    label: item.level === '1' ? obj.cityName : obj.regionName,
                                    value: obj.areaCode
                                });
                            }
                        })
                    }
                    item.loading = false;
                    callback();
                })
            }
        }
    }
</script>
<style lang="less" scoped>

.ivu-cascader-transfer .ivu-cascader-menu-item {
  padding-right: 25px !important;

}
.ivu-cascader .ivu-select-dropdown .ivu-cascader-menu {
    min-width: 160px !important;
}

</style>
